<template>
    <el-menu default-active="2" class="el-menu-vertical-demo" router>
        <template v-for="(item) in routerList" :key="item.path">
            <template v-if="!item.children.length">
                <el-menu-item :index="item.path">
                    <template #title>
                        <el-icon>
                            <component :is="item.meta.icon.name" :color="item.meta.icon.color"></component>
                        </el-icon>
                        <span>{{ item.meta.title }}</span>
                    </template>
                </el-menu-item>
            </template>
            <el-sub-menu :index="item.path" v-if="item.children.length > 0">
                <template #title>
                    <el-icon>
                        <component :is="item.meta.icon" color="red"></component>
                    </el-icon>
                    <span>{{ item.meta.title }}</span>
                </template>
                <MyMenu :routerList="item.children"></MyMenu>
            </el-sub-menu>
        </template>
    </el-menu>
</template>

<script setup lang="ts">
const { routerList } = defineProps({
    routerList: {
        type: Array,
        default: []
    }
});


</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.el-menu {
    border-right: solid 1px #ffffff;
}
</style>